iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0
生成式 AI

30天製作生成式AI的互動網頁專案系列 第 5

Day-5 flask網頁設計的基礎-1

  • 分享至 

  • xImage
  •  

Flask 是一個使用 Python 語言開發的輕量級 Web 框架,常用於快速構建小型到中型的網頁應用。它的設計簡潔、靈活,適合初學者學習網頁後端開發,也受到許多專業開發者的喜愛。使用 Flask 開發網頁時,主要包含三個核心概念:路由、視圖函式與模板。

  1. 路由與視圖函式

在 Flask 中,每一個 URL 對應一個 Python 函式,稱為「視圖函式」。透過 @app.route() 裝飾器,Flask 將使用者請求的網址與對應的函式連接起來。當使用者訪問網站時,Flask 根據路由決定要執行哪個函式,並回傳對應的內容。

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, This is Home"
  1. 使用 HTML 模板

為了讓網頁更具視覺效果,Flask 支援整合 HTML 模板系統。你可以在 templates/ 資料夾中建立 .html 文件,並使用 render_template() 函式來載入支援變數插入、條件判斷與迴圈等功能,讓後端資料可以靈活傳入前端頁面。

from flask import render_template

@app.route('/view')
def about():
    return render_template("view.html", name="view_page")

對應的 view.html:

<h1>welcome, {{ name }}!</h1>

第一部分先講到這邊,下一部分會講到flask的表單及靜態檔案使用。


上一篇
Day-4 Phi-4-mini模型下載及測試
下一篇
Day-6 flask網頁設計的基礎-2
系列文
30天製作生成式AI的互動網頁專案6
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言